<template>
	<div class="j-question">
		<j-header :indexNum="8"></j-header>
		<div class="ques-box">
			<div class="jq-banner"></div>
			<div class="nav-title">
				<div class="container clearfix">
					<div class="nav-text pull-left">常见问题</div>
					<div class="nav-link pull-left">
						<router-link to="/">首页 </router-link>/
						<span>联系我们 </span>/
						<span>常见问题 </span>
					</div>
				</div>
			</div>
			<div class="container">
				<ul class="faq-list">
					<li v-for="(item,index) in qList" :key="index">
						<div class="clearfix margin-bottom-20">
							<div class="q-back pull-left">Q</div>
							<div class="q-tt">{{ item.Q }}</div>
						</div>
						<div class="clearfix jq-answer">
							<div class="q-back a-back pull-left">A</div>
							<div class="q-tt">
								<div class="q-txt" :class="{active:index == num}" v-html="item.A"></div>
								<div class="text-right">
									<a role="button" class="faq-more">
										<span class="add" @click="addMore(index)" v-if="isAdd !== index"></span>
										<span class="remove" @click="removeMore(index)" v-else></span>
									</a>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JFooter from '../../components/Footer.vue'
import { quesList } from '../../datas/question.json'
export default {
  components: {
    JHeader, JFooter, quesList
  },
  data () {
    return {
      qList: quesList,
	    num: '',
      isAdd: quesList
    }
  },
  methods: {
    ques () {
      console.log(quesList)
      console.log(this.qList)
    },
    addMore (index) {
      this.num = index
	    this.isAdd = index
    },
	  removeMore () {
      this.num = ''
      this.isAdd = ''
	  }
  },
  created () {
    this.ques()
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-question{
		.clearfix{
			overflow: hidden;
		}
		.jq-banner{
			height: 150px;
			background: url(../../assets/banner/banner04.jpg) center top no-repeat;
		}
		.ques-box{
			margin-bottom: 130px;
		}
		.faq-list{
			width: 900px;
			margin: 10px auto 0 auto;
			li{
				margin: 20px auto;
				border-bottom: 1px dashed #EEE;
				width: 100%;
				.margin-bottom-20{
					margin-bottom: 18px;
					.q-back{
						color: #fff;
						background: #ff3d2b;
						width: 25px;
						height: 25px;
						line-height: 23px;
						border-radius: 50% 50%;
						text-align: center;
					}
					.q-tt {
						text-align: left;
						color: #282828;
						padding-left: 45px;
					}
				}
				.jq-answer{
					.q-back{
						color: #fff;
						background: #31ba01;
						width: 25px;
						height: 25px;
						line-height: 23px;
						border-radius: 50% 50%;
						text-align: center;
					}
					.a-back{
						background: #00aff4;
					}
					.q-tt{
						color: #282828;
						padding-left: 45px;
						.q-txt{
							/*color: #727272;*/
							color: #333333;
							overflow: hidden;
							margin-bottom: 10px;
							height: 50px;
							line-height: 25px;
						}
						p{
							margin-bottom: 0!important;
						}
						.q-txt.active {
							height: auto;
						}
						.text-right{
							.faq-more{
								font-size: 20px;
								color: #2ea7e0;
								cursor: pointer;
								.remove{
									display: inline-block;
									width: 20px;
									height: 20px;
									background: url("../../assets/remove.png") center no-repeat;
									background-size: 20px 20px;
								}
								.add{
									display: inline-block;
									width: 20px;
									height: 20px;
									background: url("../../assets/add.png") center no-repeat;
									background-size: 20px 20px;
								}
							}
						}
					}
				}
			}
		}
	}
	@media (max-width: 991px){
		.j-question{
			.faq-list{
				width: 100%;
			}
		}
	}
	@media (max-width: 767px){
		.j-question{
			.faq-list{
				width: 100%;
			}
		}
	}
</style>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-question{
		.q-txt{
			p{
				margin-bottom: 0!important;
			}
		}
	}
</style>
